/* general styles */
html {
    background-color: #3B2D23;
    color: #DDCFC4;
    font-family: "Glegoo", serif;
}

body{
    max-width: 1200px;
    margin: auto;
}

p{
    text-align: center;
}

.title {
    color: white;
    font-size: 20px;
    line-height: 20px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-width: 250px;
}

.pages {
    color: #70645C;
    font-size: 15px;
    line-height: 22px;
    text-align: center;
    max-width: 300px; 
    height: auto; 
    position: absolute;
}

a {
    color: #604F42;
    font-size: 15px;
    line-height: 22px;
    text-decoration: none;
    text-align: center;
}

a:hover {
    color: #DDCFC4; /* Change the color to red on hover */
}

#page_1 {
    position: fixed;
    top: 10%;
    left: 18%;
}

#page_2 {
    position: fixed;
    top: 42%;
    left: 20%;
}

#page_3 {
    position: fixed;
    top: 30%;
    left: 36%;
}

#page_4 {
    position: fixed;
    top: 40%;
    left: 84%;
}

#page_5 {
    position: fixed;
    top: 32%;
    left: 27%;
}

#page_6 {
    position: fixed;
    top: 40%;
    left: 52%;
}

#page_7 {
    position: fixed;
    top: 72%;
    left: 80%;
}

#page_8 {
    position: fixed;
    top: 45%;
    left: 90%;
}

#page_9 {
    position: fixed;
    top: 90%;
    left: 42%;
}

#page_10 {
    position: fixed;
    top: 12%;
    left: 65%;
}

#page_11 {
    position: fixed;
    top: 20%;
    left: 47%;
}

#page_12 {
    position: fixed;
    top: 87%;
    left: 60%;
}

#page_13 {
    position: fixed;
    top: 26%;
    left: 70%;
}

#page_14 {
    position: fixed;
    top: 60%;
    left: 40%;
}

#page_15 {
    position: fixed;
    top: 75%;
    left: 42%;
}

#page_16 {
    position: fixed;
    top: 68%;
    left: 30%;
}

#page_17 {
    position: fixed;
    top: 57%;
    left: 10%;
}

#page_18 {
    position: fixed;
    top: 90%;
    left: 20%;
}

#page_19 {
    position: fixed;
    top: 48%;
    left: 30%;
}

#page_20 {
    position: fixed;
    top: 65%;
    left: 76%;
}

#page_21 {
    position: fixed;
    top: 62%;
    left: 58%;
}

#page_22 {
    position: fixed;
    top: 50%;
    left: 70%;
}

#page_23 {
    position: fixed;
    top: 82%;
    left: 70%;
}

#page_24 {
    position: fixed;
    top: 78%;
    left: 23%;
}

#page_25 {
    position: fixed;
    top: 20%;
    left: 90%;
}